﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeBehind="DisplayTree.aspx.cs" Inherits="DFT.DisplayTree" %>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div style="padding-left: 5px; width: 922px; height: 26px; background-image: url(images/banner-blue.gif);
        background-repeat: repeat; background-position: left top;">
        <img alt="Zoom In" title="Zoom In" src="images/zoomin.gif" onclick="izImgZoom_zoomIn();"
            style="margin: 6px 3px 4px 3px; width: 16px; height: 16px; border: none; cursor: pointer;" />
        <img alt="Zoom Out" title="Zoom Out" src="images/zoomout.gif" onclick="izImgZoom_zoomOut();"
            style="margin: 6px 3px 4px 3px; width: 16px; height: 16px; border: none; cursor: pointer;" />
        <img alt="Actual Size" title="Actual Size" src="images/actualsize.gif" onclick="izImgZoom_actualSize();"
            style="margin: 6px 3px 4px 3px; width: 16px; height: 16px; border: none; cursor: pointer;" />
        <img alt="Best Fit" title="Best Fit" src="images/bestfit.gif" onclick="izImgZoom_bestFit();"
            style="margin: 6px 3px 4px 3px; width: 16px; height: 16px; border: none; cursor: pointer;" />
    </div>
    <div id="izImgZoom" style="width: 922px; overflow: auto;">
        <div id="izImgZoom_divImage" style="width: 922px; overflow: auto; text-align: center;">
            <asp:ImageMap ID="impBOM" runat="server">
            </asp:ImageMap>
        </div>
    </div>
    <script type="text/javascript">
        function izImgZoom_zoomIn() {
            try {
                var img = document.getElementById("<%=this.impBOM.ClientID %>");
                ImgMap("<%=this.impBOM.ClientID %>", "ImageMap<%=this.impBOM.ClientID %>");
                img.width = img.width * 1.25;
                CngSize("<%=this.impBOM.ClientID %>", img.width, img.height);
            }
            catch (e) {
                alert('zoomIn error: ' + e.message);
            }
        }
        function izImgZoom_zoomOut() {
            try {
                var img = document.getElementById("<%=this.impBOM.ClientID %>");
                ImgMap("<%=this.impBOM.ClientID %>", "ImageMap<%=this.impBOM.ClientID %>");
                img.width = img.width * 0.75;
                CngSize("<%=this.impBOM.ClientID %>", img.width, img.height);
            }
            catch (e) {
                alert('zoomOut error: ' + e.message);
            }
        }
        function izImgZoom_actualSize() {
            try {
                var img = document.getElementById("<%=this.impBOM.ClientID %>");
                ImgMap("<%=this.impBOM.ClientID %>", "ImageMap<%=this.impBOM.ClientID %>");
                img.removeAttribute('width');
                CngSize("<%=this.impBOM.ClientID %>", img.width, img.height);
            }
            catch (e) {
                alert('actualSize error: ' + e.message);
            }
        }
        function izImgZoom_bestFit() {
            try {
                var iz = document.getElementById('izImgZoom');
                var img = document.getElementById("<%=this.impBOM.ClientID %>");
                ImgMap("<%=this.impBOM.ClientID %>", "ImageMap<%=this.impBOM.ClientID %>");
                var cw = iz.clientWidth;
                while (cw == 0) {
                    iz = iz.parentElement; cw = iz.clientWidth;
                }
                var ch = iz.clientHeight; img.removeAttribute('width');
                var ar = img.width / img.height;

                if (ar >= 1.0) {
                    img.width = cw - 2;
                }
                else {
                    img.width = Math.floor(ch * ar) - 2;
                }
                CngSize("<%=this.impBOM.ClientID %>", img.width, img.height);
            }
            catch (e) {
                alert('bestFit error: ' + e.message);
            }
        }

        function ImgMap(id, mid) {
            var img = document.getElementById(id);
            img.imgmap = [document.getElementById(mid), img.width, img.height];
            imgmaparea = img.imgmap[0].getElementsByTagName('AREA');
            img.ary = new Array();
            for (zxc0 = 0; zxc0 < imgmaparea.length; zxc0++) {
                img.ary[img.ary.length] = imgmaparea[zxc0].coords;
            }
        }

        function CngSize(id, w, h) {

            var img = document.getElementById(id);
            for (zxc0 = 0; zxc0 < img.ary.length; zxc0++) {
                coords = img.ary[zxc0].split(',');
                var str = parseInt(coords[0]) * w / img.imgmap[1] + ',' + parseInt(coords[1]) * h / img.imgmap[2] + ',' + parseInt(coords[2]) * w / img.imgmap[1] + ',' + parseInt(coords[3]) * w / img.imgmap[1];
                img.imgmap[0].getElementsByTagName('AREA')[zxc0].coords = str;
            }
        }

        
    </script>
</asp:Content>
